React Streaming: Progressiv Server-Side Rendering for Optimeret Brugeroplevelse

I webudviklingsverdenen er det afgørende at levere en hurtig og responsiv brugeroplevelse. Brugere forventer, at websteder indlæses hurtigt og er interaktive uden forsinkelse. React, et populært JavaScript-bibliotek til opbygning af brugergrænseflader, tilbyder en kraftfuld teknik kaldet Streaming Server-Side Rendering (SSR) til at imødekomme denne udfordring. Denne artikel dykker ned i konceptet React Streaming SSR, udforsker dets fordele, implementering og indvirkning på webstedsydelse og brugeroplevelse.

Hvad er Server-Side Rendering (SSR)?

Traditionel client-side rendering (CSR) involverer, at browseren downloader HTML-, JavaScript- og CSS-filer og derefter gengiver indholdet på client-siden. Selvom denne tilgang er fleksibel, kan den føre til en forsinket indledende gengivelse, da brugeren skal vente på, at alle ressourcer downloades, og at JavaScript udføres, før der vises noget indhold. SSR gengiver derimod React-komponenterne på serveren og sender den fuldt gengivede HTML til klienten. Dette resulterer i en hurtigere indledende indlæsningstid, da browseren modtager fuldt udformet HTML, der kan vises med det samme.

Begrænsningerne ved Traditionel SSR

Selvom traditionel SSR tilbyder en betydelig forbedring i forhold til CSR, har den sine egne begrænsninger. I traditionel SSR skal hele applikationen gengives på serveren, før nogen HTML sendes til klienten. Dette kan være en flaskehals, især for komplekse applikationer med flere komponenter og dataafhængigheder. Time to First Byte (TTFB) kan være høj, hvilket fører til en opfattet langsomhed for brugeren.

Indtast React Streaming SSR: En Progressiv Tilgang

React Streaming SSR overvinder begrænsningerne ved traditionel SSR ved at anvende en progressiv tilgang. I stedet for at vente på, at hele applikationen gengives på serveren, opdeler Streaming SSR gengivelsesprocessen i mindre bidder og streamer disse bidder til klienten, efterhånden som de bliver tilgængelige. Dette giver browseren mulighed for at begynde at vise indhold meget tidligere, hvilket forbedrer den opfattede ydeevne og reducerer TTFB. Tænk på det som en restaurant, der tilbereder dit måltid i etaper: forretten serveres først, derefter hovedretten og til sidst desserten, i stedet for at vente på, at hele måltidet er klar på én gang.

Fordele ved React Streaming SSR

React Streaming SSR tilbyder mange fordele for webstedsydelse og brugeroplevelse:

• Hurtigere Indledende Indlæsningstid: Ved at streame HTML-bidder til klienten kan browseren begynde at vise indhold meget tidligere, hvilket resulterer i en hurtigere opfattet indlæsningstid og forbedret brugerengagement.
• Forbedret Time to First Byte (TTFB): Streaming SSR reducerer TTFB ved at sende den indledende HTML-bid så snart den er klar, i stedet for at vente på, at hele applikationen gengives.
• Forbedret Brugeroplevelse: En hurtigere indledende indlæsningstid fører til en bedre brugeroplevelse, da brugerne ikke holdes ventende på, at indholdet vises.
• Bedre SEO: Søgemaskiner kan crawle og indeksere indholdet mere effektivt, da HTML'en er let tilgængelig på serveren.
• Progressiv Hydrering: Streaming SSR muliggør progressiv hydrering, hvor client-side React-koden gradvist knytter hændelseslyttere og gør applikationen interaktiv, efterhånden som HTML-bidderne streames.
• Forbedret Ressourceudnyttelse: Ved at opdele gengivelsesprocessen i mindre bidder kan Streaming SSR forbedre ressourceudnyttelsen på serveren.

Sådan Fungerer React Streaming SSR

React Streaming SSR udnytter ReactDOMServer.renderToPipeableStream() API'en til at streame HTML-bidder til klienten. Denne API returnerer en læsbar stream, der kan pipes til serverens response-objekt. Her er en forenklet illustration af, hvordan det fungerer:

1. Serveren modtager en anmodning om en side.
2. Serveren kalder ReactDOMServer.renderToPipeableStream() for at gengive React-applikationen til en stream.
3. Streamen begynder at udsende HTML-bidder, efterhånden som React-komponenterne gengives.
4. Serveren piper streamen til response-objektet og sender HTML-bidderne til klienten.
5. Browseren modtager HTML-bidderne og begynder at vise dem progressivt.
6. Når alle HTML-bidderne er modtaget, hydrerer browseren React-applikationen, hvilket gør den interaktiv.

Implementering af React Streaming SSR

For at implementere React Streaming SSR skal du bruge en Node.js-server og en React-applikation. Her er en trin-for-trin guide:

1. Konfigurer en Node.js-server: Opret en Node.js-server ved hjælp af et framework som Express eller Koa.
2. Installer React og ReactDOMServer: Installer react og react-dom pakkerne.
3. Opret en React-applikation: Opret en React-applikation med de komponenter, du vil gengive på serveren.
4. Brug ReactDOMServer.renderToPipeableStream(): I din serverkode skal du bruge ReactDOMServer.renderToPipeableStream() API'en til at gengive din React-applikation til en stream.
5. Pipe streamen til response-objektet: Pipe streamen til serverens response-objekt for at sende HTML-bidderne til klienten.
6. Håndter fejl: Implementer fejlhåndtering for at fange eventuelle fejl, der kan opstå under gengivelsesprocessen.
7. Tilføj et script-tag til hydrering: Inkluder et script-tag i HTML'en for at hydrere React-applikationen på client-side.

Eksempel på Kodebid (Server-Side):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Din React-komponent

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Beklager, noget gik galt
');
    }
  });

  setTimeout(abort, 10000); // Valgfrit: Timeout for at forhindre ubestemt hængning
});

app.use(express.static('public')); // Servér statiske aktiver

app.listen(port, () => {
  console.log(`Server lytter på http://localhost:${port}`);
});

Eksempel på Kodebid (Client-Side - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Eksempel på React App-komponent (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data indlæst succesfuldt!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simuler en indlæsningsforsinkelse
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Velkommen til Streaming SSR!
      
Dette er en demonstration af React Streaming SSR.
      Indlæser...
}>